{% extends 'home/public/base.html' %}


{% block css %}
<link rel="stylesheet" type="text/css" href="/static/home/css/cart.css">
<link rel="stylesheet" type="text/css" href="/static/home/css/cart-app.css">

{% endblock %}

{% block con %}


<div class="mainbody cart" style="padding-top: 100px;">
    <div class="row">
        <div class="container">

        
        {% for v in cartlist.0.uid.address_set.all %}
            <div class="col-sm-6 col-md-3 address">
                <div class="thumbnail" style=" {% if v.isSelect == 1 %} border:1px dashed red;{% endif %}min-height: 160px;">
                  <div class="caption">
                    <address>
                        <strong>收货人:<span>{{ v.name }}</span></strong><br>
                        <abbr title="address">地址:</abbr>
                        <span>{{ v.address }}</span>
                        <br>
                        <abbr title="phone">电话:</abbr> 
                        <span>{{ v.phone }}</span>
                    </address>
                    <p>
                        {% if v.isSelect == 1 %} 
                            <a href="#" class="btn btn-danger select" aid="{{ v.id }}" role="button" style="position: absolute;bottom:30px;">
                            默认地址</a>
                        {% else %} 
                             <a href="javascript:void(0)" aid="{{ v.id }}" class="btn btn-primary setselect" role="button" style="position: absolute;bottom:30px;">设为默认</a> 
                        {% endif %}
                    </p>
                  </div>
                </div>
            </div>
        {% endfor %}


        </div>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">新增地址</h4>
            </div>
            <form role="form" action="{% url 'myhome_addressinsert' %}" method="post">
                {% csrf_token %}
                <input type="hidden" name="ids" value="{{ request.GET.ids }}">
                <div class="modal-body">
                  <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                        <div class="form-group">
                          <label for="exampleInputEmail1">收货人</label>
                          <input type="text" class="form-control" name="name">
                        </div>
                        <div class="form-group">
                          <label for="exampleInputEmail1">收货电话</label>
                          <input type="text" class="form-control" name="phone">
                        </div>
                        <div class="form-group">
                          <label for="exampleInputEmail1">收货地址</label>
                          <input type="text" class="form-control" name="address">
                        </div>
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button  class="btn btn-primary" >修改</button>
                    <button  class="btn btn-primary" >添加</button>
                </div>
            </form>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="row">
        <div class="container">
            <!-- 地址详情头 -->
            <table class="cart-header certer">
                <tbody>
                    <tr>
                        <td class="cart-col-select col-md-2 col-xs-3 col-sm-3">
                            收货人
                        </td>
                        <td class="cart-col-phone col-md-2 hidden-xs hidden-sm">收货电话</td>
                        <td class="cart-col-address col-md-5 hidden-xs hidden-sm">收货地址</td>
                        <td class="cart-col-isSelect col-md-1 hidden-xs hidden-sm">是否为默认地址</td>
                        <td class="cart-col-operation col-md-2 hidden-xs hidden-sm">操作
                            
                        </td>
                    </tr>
                </tbody>
            </table><!-- 购物车详情头 E-->
            
            <!-- 地址清单信息列表 -->
            <div class="cart-merchant-list">
                <div class="cart-merchant">
                    <table class="cart-merchant-body certer" >
                        <tbody>
                        {% for v in adds %}
                            <tr class="cart-product">
                                <td class="cart-col-select col-md-2 " >  
                                    <div>{{ v.name }}</div>
                                </td>
                                <td class="cart-col-phone col-md-2 ">  
                                    <div>{{ v.phone }}</div>
                                </td>
                                <td class="cart-col-address col-md-5 ">  
                                    <div>{{ v.address }}</div>
                                </td>
                                <td class="cart-col-isSelect col-md-1 ">  
                                     {% if v.isSelect == 0 %}
                                            否
                                        {% elif v.isSelect == 1 %}
                                            是
                                        {% endif %}
                              
                                    </div>
                                </td >
                                <td class="cart-col-operation col-md-2 ">
                                    <div class="modal-footer" >
                                        <button  class="btn btn-primary" data-toggle="modal" data-target="#myModal" >添加</button>
                                        <button  class="btn btn-primary" data-toggle="modal" data-target="#myModal" >修改</button>
                                        <button   class="btn btn-primary">删除</button>
                                        <a  href="javascript:void(0)" aid="{{ v.id }}" class="btn btn-primary setselect" role="button">默认</a>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                      
                        </tbody>
                    </table>
                </div>
            </div><!-- 购物清单信息列表 E-->
        </div>
    </div>
</div>
<script type="text/javascript">
    // 获取默认地址.设置到隐藏域中
    $('input[name=addressid]').val($('.address .select').attr('aid'))

    // 选择收货地址
    $('.address').click(function(){
        // 给当前的点击的元素设置 边框
        $(this).find('.thumbnail').css('border','1px dashed red')
        // 移除其它元素的 css样式
        $(this).siblings().each(function(){
            $(this).find('.thumbnail').css('border','1px solid #ddd')
        })

        $('input[name=addressid]').val($(this).find('a').attr('aid'))
    })

    // 设为默认地址
    $('.setselect').click(function(){
        // 获取当前地址的id号
        var aid = $(this).attr('aid')
        // 发送ajax修改数据
        $.get('{% url "myhome_addressset"%}',{'aid':aid},function(data){
            location.href=location.href;
        })
    })





    
</script>

{% endblock %}